<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <metaname="format-detection" content="telephone=no" />
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>科协</title>
    <link rel="stylesheet" type="text/css" href="./css/api.css" />
    <link rel="stylesheet" type="text/css" href="./css/common.css" />

    <style>
        /* 头部样式 */

        #firstHeader {
            background-color: #2997e4;
            position: relative;
            z-index: 999;
        }

        .topbar {
            /*background: #FF8400;*/
            height: 50px;
            border-bottom: 1px solid #DDDFE3;
        }

        .topbar_title {
            display: inline-block;
            font-size: 20px;
            line-height: 50px;
            padding-left: 12px;
        }

        .hr01,
        .hr02 {
            height: 28px;
        }

        .headerico {
            padding: 11px 15px 11px 15px;
        }

        .headericohover {
            background: #DADDE0;
        }

        .fr {
            float: right;
        }

        .fl {
            float: left;
        }
        /*第一头部*/

        #logo {
            padding: 11px 0 0 10px;
            height: 28px;
        }

        .search {
            height: 34px;
            line-height: 34px;
            padding-left: 10px;
            border-radius: 30px;
            margin-top: 8px;
            position: absolute;
            left: 20px;
            right: 60px;
            font-size: 14px;
        }

        .search img {
            vertical-align: top;
            width: 20px;
            padding-top: 7px;
            padding-right: 10px;
        }

        .firstSearch {
            left: 20px;
            right: 60px;
            background-color: #ffffff;
            color: #686868;
            text-align: center;
        }
        /* 头部切换样式 */

        .titlebar {
            display: none;
        }

        .activebar {
            display: block;
        }
        /* 底部切换按钮样式 */

        ul {
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
        }

        #footer {
            height: 61px;
            line-height: 60px;
            background-color: #FAFAFA;
            border-top: 1px solid #FAFAFA;
        }

        #footer li {
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            flex: 1;
            height: 60px;
            position: relative;
        }
        /* 选项卡样式 */

        .scrollbar {
            display: -webkit-box;
            display: -webkit-flex;
            text-align: center;
            height: 40px;
            line-height: 40px;
            background: #EBECF0;
            font-size: 12px;
            position: relative;
        }

        .col1 {
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            flex: 1;
            color: #909090;
        }

        .indexbar {
            position: absolute;
            /*background: #0fc;*/
            width: 50%;
            height: 5px;
            left: 0px;
            bottom: 0px;
            -webkit-transition: 300ms;
        }

        .redbox {
            background: #DB4646;
            width: 40px;
            height: 5px;
            position: relative;
            left: auto;
            right: auto;
            margin-left: auto;
            margin-right: auto;
        }
        /********************/
        /* 底部按钮原始样式 */
        /********************/

        .bbtn01 {
            background: url(./image/sy2@3x.png) no-repeat center 4px;
        }

        .bbtn02 {
            background: url(./image/xx@3x.png) no-repeat center 4px;
        }

        .bbtn03 {
            background: url(./image/wd@3x.png) no-repeat center 4px;
        }
        /*.bbtn04 {background: url(./image/firstpage/tab_cart.png) no-repeat center 4px; }*/
        /*.bbtn05 {background: url(./image/firstpage/tab_account.png) no-repeat center 4px; }*/

        .bottom_btn {
            width: 99%;
            height: 43px;
            padding-top: 18px;
            background-position-y: 4px;
            background-size: 30px;
            font-size: 12px;
            color: #A5A5A5;
        }
        /* 底部按钮激活样式 */

        .activebtn0 {
            background: url(./image/sy@3x.png) no-repeat center 4px;
        }

        .activebtn1 {
            background: url(./image/xx2@3x.png) no-repeat center 4px;
        }

        .activebtn2 {
            background: url(./image/wd2@3x.png) no-repeat center 4px;
        }
        /*.activebtn3 {background: url(./image/firstpage/tab_cart_chosen.png) no-repeat center 4px; }*/
        /*.activebtn4 {background: url(./image/firstpage/tab_account_chosen.png) no-repeat center 4px; }*/

        .activebtn {
            color: #2f9ae5;
            background-size: 30px;
        }

        .bottomhover {
            background-color: #46494B;
        }

        .sys {
            width: 26px;
            position: absolute;
            right: 20px;
            margin-top: 12px;
        }

        .sys img {
            width: 100%;
        }

        .all_num {
            display: none;
            position: absolute;
            top: 0px;
            right: 25%;
            width: 15px;
            height: 15px;
            line-height: 15px;
            background: red;
            font-size: 12px;
            border-radius: 50%;
            color: #fff;
        }
    </style>
</head>

<body>

    <div id="wrap">
        <!-- 第一头部 -->
        <div id="firstHeader" class="titlebar activebar">
            <div class="topbar">
                <div class="search firstSearch" tapmode="" onclick="openSearch()">
                    <img src="./image/ss@2x.png" alt="">请输入关键字
                </div>
                <div class="sys" onclick="ewm()">
                    <img src="./image/navibar_icon_qr.png" alt="">
                </div>
            </div>
        </div>



        <div id="main">

        </div>

        <div id="footer">
            <ul>
                <li tapmode="activebtn0 activebtn" onclick="switchframe('first_frame', 0)">
                    <a class="bottom_btn bbtn01 weixin activebtn activebtn0">首页</a>
                </li>

                <li tapmode="activebtn1 activebtn" onclick="switchframe('forth_frame', 1)">
                    <a class="bottom_btn bbtn02 communicate ">消息</a>
                    <div class="all_num">2</div>
                </li>

                <li tapmode="activebtn2 activebtn" onclick="switchframe('five_frame', 2)">
                    <a class="bottom_btn bbtn03 discover">我的</a>
                </li>

                <!-- <li tapmode="activebtn3 activebtn" onclick="switchframe('forth_frame', 3)">
            <a class="bottom_btn bbtn04 home">购物车</a>
          </li>
          <li tapmode="activebtn4 activebtn" onclick="switchframe('five_frame', 4)">
            <a class="bottom_btn bbtn05 home">我的</a>
          </li> -->
            </ul>
        </div>
    </div>
</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript" src="./script/zepto.js"></script>
<script type="text/javascript" src="./script/utils.js"></script>
<script type="text/javascript" src="./script/common.js"></script>
<script type="text/javascript">
    var firstHeader = $api.byId('firstHeader');
    var firstHeaderOffset;

    var main = $api.byId('main');
    var mainPos = $api.offset(main);

    var footer = $api.byId('footer');
    var footerPos = $api.offset(footer);

    var gFrameIndex;

    function emptyopt() {}

    function openNewWindow(type) {
        api.openWin({
            reload: true,
            name: type,
            url: './html/' + type + '.html',
            pageParam: {
                userInfo: api.pageParam.userInfo
            },
            bounces: false,
            opaque: false
        });
    }

    function openSearch() {
        api.openWin({
            name: 'search',
            url: './html/search.html',
            pageParam: {
                type: 'all'
            },
            bounces: false,
            delay: 200
        });
    }



    // 随意切换按钮
    function randomSwitchBtn(name, index) {
        var lis = $api.domAll('.bottom_btn');
        var i = 0,
            len = lis.length;
        var curLi = lis[index];

        for (i; i < len; i++) {
            var thisLi = lis[i];
            if (thisLi === curLi) {
                $api.addCls(thisLi, 'activebtn');
                $api.addCls(thisLi, 'activebtn' + index);
                continue;
            } else {
                if ($api.hasCls(thisLi, 'activebtn')) {
                    $api.removeCls(thisLi, 'activebtn');
                    $api.removeCls(thisLi, 'activebtn' + i);
                }
            }
        }

        // 切换头部
        var lis = $api.domAll('.titlebar');
        var i = 0,
            len = lis.length;
        var curLi = lis[index];

        for (i; i < len; i++) {
            var thisLi = lis[i];
            if (thisLi === curLi) {
                $api.addCls(thisLi, 'activebar');
                $api.addCls(thisLi, 'activebar' + index);
                continue;
            } else {
                if ($api.hasCls(thisLi, 'activebar')) {
                    $api.removeCls(thisLi, 'activebar');
                    $api.removeCls(thisLi, 'activebar' + i);
                }
            }
        }
    }

    // 隐藏所有的一级frame
    function hideAllFrame() {
        api.setFrameAttr({
            name: 'first_frame',
            hidden: true
        });
        api.setFrameAttr({
            name: 'second_frame',
            hidden: true
        });
        api.setFrameAttr({
            name: 'third_frame',
            hidden: true
        });
        api.setFrameAttr({
            name: 'forth_frame',
            hidden: true
        });
        api.setFrameAttr({
            name: 'five_frame',
            hidden: true
        });
    }

    // 自己修复ios显示frame的时候bug
    // ios自己主动隐藏后，再open就不显示了
    function showgroup(type) {
        api.setFrameGroupAttr({
            name: type + 'group',
            hidden: false
        });
    }

    // 展示指定的frame
    function showframe(type) {
        api.setFrameAttr({
            name: type,
            hidden: false
        });
    }

    // 打开第一个、第三个frame
    function openframeinstance(frame, marginTop, isBounce) {
        api.openFrame({
            reload: true,
            name: frame,
            url: './html/' + frame + '/' + frame + '_body.html',
            rect: {
                x: 0,
                y: marginTop,
                w: 'auto',
                h: api.frameHeight - marginTop - footerPos.h
            },
            pageParam: {
                name: frame,
                userInfo: api.pageParam.userInfo
            },
            // bounces: isBounce,
            bounces: false,
            vScrollBarEnabled: false,
            hScrollBarEnabled: false,
            delay: 200
        });
        // 切换frame的同时  获取用户的所有未读消息总数
        get_alll_msg();
    }

    // 移动滑动块
    function sliderbarCallback(id, num) {

        // 得到背景元素的宽度
        // var width=parseInt(window.getComputedStyle($api.byId('matchwidth'),null).width);
        var width = parseInt(api.frameWidth / 2);
        // api.alert({msg:width});
        if (num != 0) {
            num = width;
        }
        // 移动背景元素的宽度  在index.html不能获得 forth_frame.html上面的dom，虽然是在同一个手机屏幕上
        $api.css($api.byId(id), "-webkit-transform:translate(" + num + "px,0)");
    }

    // ===================================
    // 响应底部按钮的切换frame
    // ===================================
    function switchframe(type, _index) {
        if (_index === gFrameIndex) {
            return 0;
        } else {
            gFrameIndex = _index;
        }

        switch (type) {
            case 'first_frame':
                randomSwitchBtn('first_frame', 0);
                hideAllFrame();
                openframeinstance('first_frame', firstHeaderOffset.h, true);
                // showframe('first_frame');
                break;
                // case 'second_frame':
                //     randomSwitchBtn('second_frame', 1);
                //     hideAllFrame();
                //     openframeinstance('second_frame', firstHeaderOffset.h, true);
                //     // showgroup('hot');
                // break;
                // case 'third_frame':
                //     randomSwitchBtn('third_frame', 2);
                //     hideAllFrame();
                //     openframeinstance('third_frame', firstHeaderOffset.h, false);
                //     // showframe('third_frame');
                // break;
            case 'forth_frame':
                randomSwitchBtn('forth_frame', 1);
                hideAllFrame();
                openframeinstance('forth_frame', 0, false);
                // showgroup('forth_frame');
                break;
            case 'five_frame':
                randomSwitchBtn('five_frame', 2);
                hideAllFrame();
                openframeinstance('five_frame', 0, false);
                // showgroup('forth_frame');
                break;
            default:
                break;
        }

    }
    var FNScanner = null

    function ewm() {

        if (!$api.getStorage('token')) {
            alert('用户未登录，请登录')
            return
        }
        FNScanner.open({
            autorotation: true,
        }, function(ret, err) {
            if (ret.eventType == 'success') {
                // alert(JSON.stringify(ret.content));
                api.ajax({
                    url: window.Url.signActivity,
                    timeout: 300,
                    method: 'post',
                    headers: {
                        'Content-Type': 'application/json',
                        'baseParams': $api.getStorage('token') //token
                    },
                    data: {
                        body: {
                            activityid: ret.content
                        }
                    }
                }, function(r, e) {
                    if (r) {
                        // api.alert({ msg: JSON.stringify(r) });
                        alert(r.message)
                    } else {
                        api.alert({
                            msg: JSON.stringify(e)
                        });
                    }
                })
            } else {
                // alert(JSON.stringify(err));
                return
            }
        });
    }
    // 完成首页初始化
    apiready = function() {

      // 获取所有未读消息总数
      get_alll_msg();

        FNScanner = api.require('FNScanner');


        // 设置ios7的标题栏字体变亮，全局用一个就行了
        api.setStatusBarStyle({
            style: 'dark'
        });


        firstHeader = $api.byId('firstHeader');
        $api.fixStatusBar(firstHeader);

        firstHeaderOffset = $api.offset(firstHeader);

        var main = $api.byId('main');
        var mainPos = $api.offset(main);

        var footer = $api.byId('footer');
        var footerPos = $api.offset(footer);
        gFrameIndex = 0;

        // 第一次进入打开 first_frame body
        api.openFrame({
            name: 'first_frame',
            url: './html/first_frame/first_frame_body.html',
            rect: {
                x: 0,
                y: firstHeaderOffset.h,
                w: 'auto',
                h: api.frameHeight - firstHeaderOffset.h - footerPos.h
            },
            bounces: false,
            opaque: false
                // vScrollBarEnabled:false,
                // hScrollBarEnabled:false
        });


        randomSwitchBtn('first_frame', 0);
        hideAllFrame();
        openframeinstance('first_frame', firstHeaderOffset.h, true);


        //推送
        var uzgetuisdk = api.require('pushGeTui');
        uzgetuisdk.initialize(function(ret) {
            var value = "";
            switch (ret.type) {
                case 'cid':
                    value = 'cid:' + ret.cid;
                    $api.setStorage('gt_cid', ret.cid)
                    break;
                case 'payload':
                    value = 'payload:' + ret.payload;
                    break;
                case 'occurError':
                    value = 'occurError';
                    break;
                case 'onNotificationMessageClicked':
                    value = 'onNotificationMessageClicked' + ret.onNotificationMessageClicked
                    break;
                case 'onNotificationMessageArrived':
                    value = 'onNotificationMessageArrived' + ret.onNotificationMessageArrived
                    break;
            }

            // console.log($api.getStorage('gt_cid'))

        });
        //推送
    };


    // 获取用户未读消息的总数 以及 获取当前用户接受到的推送列表消息总数


    function get_alll_msg() {
        // console.log('切换frame 执行了')
        // 判断用户是否登录  已登录获取未读的总消息数  未登录则不获取消息总数
        if ($api.getStorage('token')) {

            var rong = api.require('rongCloud2');
            rong.init(function(ret, err) {
                if (ret.status == 'error')
                    api.toast({
                        msg: err.code
                    });
            });

            rong.connect({
                token: $api.getStorage('rong-token')
            }, function(ret, err) {
              var msg_tz, msg_num = 0,
                  tz_num = 0;
                // console.log('首页打开后判断用户是否登录---获取当前用户的所有未读消息--- ' + JSON.stringify(ret));
                if (ret.status == 'success') {
                    rong.getTotalUnreadCount(function(ret, err) {
                        msg_num = ret.result;
                        console.log('点击底部后获取到的未读消息的总数---'+msg_num);

                        // 通过接口获取推送的总个数
                        api.ajax({
                            url: window.Url.getPushList + "/1",
                            timeout: 300,
                            method: 'get', // 提交类型
                            dataType: 'json', // 返回数据     json 或 text
                            headers: {
                                'Content-Type': 'application/json',
                                'baseParams': $api.getStorage('token') //token
                            }
                        }, function(ret, err) {
                            if (ret) {
                                // alert(JSON.stringify(ret));
                                if(ret.data){
                                  // console.log('点击底部获取到的通知信息列表---' + JSON.stringify(ret.data.newsList));
                                  if(ret.data.newsList.length!=0){
                                    for(var i=0;i<ret.data.newsList.length;i++){
                                        if(ret.data.newsList[i].isread!=0){
                                           tz_num = tz_num + 1;
                                           $api.setStorage('home_tz_num', tz_num);
                                          //  console.log('点击底部未读通知的总数--'+tz_num);
                                        }
                                    }

                                  }

                                  msg_tz = parseInt(msg_num) + parseInt(tz_num);
                                  if(msg_tz!=0){
                                    $('.all_num').css('display', 'block');
                                    $('.all_num').html(msg_tz);
                                  }else{
                                    $('.all_num').css('display', 'none');
                                    msg_tz = 0;
                                  }
                                }

                            } else {
                                alert(JSON.stringify(err));
                            }
                        });


                    })
                }
            });

        }


        api.execScript({
            name:'root',
            frameName: 'user_info',
            script: 'reload_frm();'
        });

    }
</script>

</html>
